<template>
  <div>
    <h1>x: {{ state.x }}</h1>
    <h1>y: {{ state.y }}</h1>
  </div>
  <div class="test" @click="handleAdd" style="cursor: pointer;">x递增测试</div>
</template>
<script setup lang='ts'>
import { getValue } from './external.js'
import { ref,reactive } from 'vue'

// 从外部引入的变量变成响应式,用reactive或ref包裹下即可成为响应式
const state = reactive(getValue())

const handleAdd = () => {
  state.x += 1
}
</script>
<style scoped lang='scss'>
</style>